import React from 'react'
import { ListGroup, ListGroupItem, Panel } from 'react-bootstrap'

const Order = ({order}) => {
  console.log('compoennt in order:', order)
  const orderDate = new window.Date(order.date)
  const dateStr = orderDate.getFullYear() + '年'+Number(orderDate.getMonth())+1+'月'+orderDate.getDay()+'日'

  const orderItems = order.products.map((order) => 
    <ListGroupItem>{'￥'+order.product.price + '  ' + order.product.name}</ListGroupItem>
  )
  return(
    

    <div>
      <Panel header={dateStr + ' ￥' + order.price}>
        <ListGroup>
            {orderItems}
        </ListGroup>
      </Panel>
  </div>
  )
}

export default Order